<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户余额列表</span>
      </div>
      <div class="list-search">
        <el-select
          v-model="utype"
          class="list-options"
          placeholder="不限身份"
          @change="funSearch"
        >
          <el-option label="不限身份" value="" />
          <el-option label="企业会员" value="1" />
          <el-option label="个人会员" value="2" />
        </el-select>
        <el-select
          v-model="status"
          class="list-options"
          placeholder="不限会员状态"
          @change="funSearch"
        >
          <el-option label="不限会员状态" value="" />
          <el-option label="黑名单会员" value="1" />
        </el-select>

        <el-select
          v-model="is_openid"
          class="list-options"
          placeholder="不限微信绑定"
          @change="funSearch"
        >
          <el-option label="不限微信绑定" value="" />
          <el-option label="已绑定微信" value="1" />
          <el-option label="未绑定微信" value="2" />
        </el-select>


        <el-input
          v-model="keyword"
          placeholder="请输入搜索内容"
          class="input-with-select"
          @keyup.enter.native="funSearchKeyword"
        >
          <el-select
            slot="prepend"
            v-model="key_type"
            placeholder="请选择"
            class="input-sel"
          >
            <el-option label="UID" value="1" />
            <el-option label="用户名" value="2" />
            <el-option label="手机号" value="3" />
            <el-option label="企业名称" value="4"/>
            <el-option label="会员姓名" value="5" />
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="funSearchKeyword"
          />
        </el-input>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column label="会员名称" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="会员类型">
          <template slot-scope="scope">
            <span>{{ scope.row.utype_msg }}</span>
<!--            <span>{{ scope.row.addtime | timeFilter }}</span>-->
          </template>
        </el-table-column>
        <el-table-column align="center" label="微信状态">
          <template slot-scope="scope">{{ scope.row.bind_msg }}</template>
        </el-table-column>
        <el-table-column align="center" label="钱包余额">
          <template slot-scope="scope" >
              <span>{{ scope.row.money }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="累计金额">
          <template slot-scope="scope">
            <span>{{ scope.row.sum_money }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="提现次数">
          <template slot-scope="scope">
            <span>{{ scope.row.withdrawal_count}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否在黑名单">
          <template slot-scope="scope">
            <span>{{scope.row.is_blacklist_msg}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="270">
          <template slot-scope="scope">
            <el-button   type="primary" size="small" @click="moenyButton(scope.row)">红包记录</el-button>
            <el-button   type="primary" size="small" @click="withdrawal(scope.row)">提现记录</el-button>
            <el-button style="color: #FFF;background-color: #67C23A;border-color: #67C23A;" v-if="scope.row.is_blacklist == 0 || scope.row.is_blacklist == null" type="primary" size="small" @click="block(scope.row.uid)">拉黑</el-button>
            <el-button style="background: #a6a9ad;border-color: #a6a9ad;color: #FFF;" v-if="scope.row.is_blacklist == 1"  type="primary" size="small" @click="RelieveBlock(scope.row.uid)">解除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="spaceline" />
      <el-row :gutter="20" style="width:100%">
        <el-col :span="20" style="text-align: right;width:100%">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
      <el-drawer
        size="50%"
        :title="title"
        :show-close="true"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
        <div style="margin-bottom: 50px;">
          <div style=" border-radius: 5px;width:95%;background: #f6f6f6;margin:0 auto;padding:15px 15px 15px 15px;font-size: 13px;font-size: 13px">
            <div>
              <div style="width:33.3%;display: inline-block" v-if="user_List.utype == 1">会员类型：企业</div>
              <div style="width:33.3%;display: inline-block" v-else if="user_List.utype == 2">会员类型：个人</div>
              <div style="width:33.3%;display: inline-block" v-else>会员类型：暂无记录</div>
              <div style="width:33.3%;display: inline-block">手机号码：{{user_List.mobile}}</div>
              <div style="width:33.3%;display: inline-block" v-if="user_List.reg_time != null">注册时间：{{user_List.reg_time | timeFilter}}</div>
              <div style="width:33.3%;display: inline-block" v-else>注册时间：暂无记录</div>
            </div>
            <div style="margin-top:12px;">
              <div style="width:66.7%;display: inline-block">基本信息：{{user_List.basics}} <a :href="user_List.link" style="color: #409eff;" target="_blank">[查看]</a></div>
              <div style="width:33.3%;display: inline-block" v-if="user_List.is_weixin == 1">微信状态：已绑定</div>
              <div style="width:33.3%;display: inline-block" v-else if="user_List.is_weixin == 0">微信状态：未绑定</div>
              <div style="width:33.3%;display: inline-block" v-else>微信状态：暂无记录</div>
            </div>
          </div>
        </div>

        <el-table
          style="width: 95%;margin:0 auto;"
          v-if="is_withdrawal"
          v-loading="listLoading"
          :data="withdrawal_list"
          element-loading-text="Loading"
          fit
          highlight-current-row
        >

          <el-table-column align="center" label="申请提现金额">
            <template slot-scope="scope">
              <span lass="font_warning">{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="申请时间">
            <template slot-scope="scope">
              <span>{{ scope.row.addtime | timeFilter }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 0">审核不通过</span>
              <span v-if="scope.row.state == 1">审核通过</span>
              <span v-if="scope.row.state == 2">审核中</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核时间">
            <template slot-scope="scope">
              <span v-if="scope.row.examinetime != 0">{{ scope.row.examinetime | timeFilter }}</span>
              <span v-if="scope.row.examinetime == 0">-</span>
            </template>
          </el-table-column>
        </el-table>




        <el-table
          v-if="is_redenvelopes"
          style="width: 95%;margin: 0 auto;"
          v-loading="listLoading"
          :data="invite_list"
          element-loading-text="Loading"
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="红包类型">
            <template slot-scope="scope">
              <span lass="font_warning">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="红包金额">
            <template slot-scope="scope">{{ scope.row.money }}</template>
          </el-table-column>
          <el-table-column align="center" label="发放时间">
            <template slot-scope="scope">
              <span>{{ scope.row.addtime | timeFilter }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-row :gutter="20" style="margin-top: 20px;width:100%">
          <el-col :span="20" style="text-align: right;width:100%;">
            <el-pagination
              background
              :current-page="invite_currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="invite_pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="invite_total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
        <div class="close" @click="handleClose">
          <i class="el-icon-close" />
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import {
  userBalance,
  block,
  relieveBlock,
  inviteRegister,
  redEnvelopesLog,
  withdrawalApplication
} from '@/api/red_envelopes'
import { parseTime } from '@/utils/index'

export default {
  filters: {
    timeFilter(timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  props: ['listtype', 'showOptionsUtype'],
  data() {
    return {
      is_redenvelopes:false,
      is_withdrawal:false,
      title:"",
      drawer: false,
      direction: 'rtl',
      utype:'',
      user_List:[],
      status:'',
      is_openid:'',
      keyword:'',
      key_type: '1',
      list: null,
      listLoading: true,
      total: 0,
      currentPage: 1,
      pagesize: 10,
      invite_list:'',
      invite_total:0,
      invite_currentPage: 1,
      invite_pagesize:10,
      withdrawal_list:[],
    }
  },
  created() {
    console.log(this.listtype)
    this.fetchData()
  },
  methods: {
    fetchData() {
      console.log(this.status)
      this.listLoading = true
      const param = {
        status: this.status,
        is_openid: this.is_openid,
        utype: this.utype,
        key_type: this.key_type,
        keyword: this.keyword,
        page: this.currentPage,
        pagesize: this.pagesize
      }
      userBalance(param).then(response => {
        this.list = response.data.items
        this.listLoading = false
        this.total = response.data.total
        this.currentPage = response.data.current_page
        this.pagesize = response.data.pagesize
      })
    },
    moenyButton(val){
      this.user_List = [];
      this.is_redenvelopes = true;
      this.is_withdrawal= false
      this.title = val.username+'的红包记录'
      this.drawer = true
      this.listLoading = true
      const param = {
        page: this.invite_currentPage,
        pagesize: this.invite_pagesize,
        id:val.uid
      }
      redEnvelopesLog(param).then(response => {
        this.invite_list = response.data.items
        this.invite_total = response.data.total
        this.invite_currentPage = response.data.current_page
        this.invite_pagesize = response.data.pagesize
        this.listLoading= false
        this.user_List = response.data.basics
      })
    },
    withdrawal(val){
      this.withdrawal_list = [];
      this.title = val.username+'的提现记录'
      this.drawer = true
      this.is_withdrawal= true
      this.is_redenvelopes = false
      this.listLoading = true
      const param = {
        page: this.invite_currentPage,
        pagesize: this.invite_pagesize,
        id:val.uid
      }
      withdrawalApplication(param).then(response => {
        this.withdrawal_list = response.data.items
        this.invite_total = response.data.total
        this.invite_currentPage = response.data.current_page
        this.invite_pagesize = response.data.pagesize
        this.user_List = response.data.basics
        this.listLoading= false
      })
    },

    handleSizeChange(val) {
      this.pagesize = val
      this.fetchData()
    },
    handleClose(done) {
      this.drawer = false
    },
    funSearchKeyword() {
      this.currentPage = 1
      this.fetchData()
    },
    funSearch() {
      this.fetchData()
    },
    RelieveBlock(val){
      this
        .$confirm('您确定要将此用户从黑名单移除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          relieveBlock({'uid':val}).then(response => {
            this.$message.success(response.message)
            this.fetchData()
          })
        })
    },
    block(val){
      this
        .$confirm('您确定要将此用户拉黑？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          block({'uid':val}).then(response => {
            this.$message.success(response.message)
            this.fetchData()
          })
        })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    }
  }
}
</script>
<style scoped>
.close {
  width: 40px;
  height: 60px;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  background: #f5f5f5;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
}
.el-icon-close {
  font-size: 30px;
  color: #777;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/deep/.el-drawer{
  overflow: inherit;
}
.drawer_table{
  width: 95%;
  margin: 0 auto;
}
</style>
